<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>
<head> 
	<title>Videshop Online</title> 
	<link href="../css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<f:view>
		<table border="0" cellpadding="0" cellspacing="10">
			<tr>
				<td colspan="2"><h1>Videoshop Online</h1></td>
			</tr>
			<tr>
				<td valign="top">
					<table border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td>
								<!-- User section -->
								<f:subview id="userSection">
									<jsp:include page="user.jsp"/>
								</f:subview>
							</td>
						</tr>
						<tr>
							<td>
								<!-- Category section -->
								<f:subview id="categorySection">
									<jsp:include page="category.jsp"/>
								</f:subview>
							</td>
						</tr>
						<tr>
							<td>
								<!-- Quick search section -->
								<f:subview id="quickSearchSection">
									<jsp:include page="quicksearch.jsp"/>
								</f:subview>
							</td>
						</tr>
					</table>
				</td>
				<td valign="top" class="mainSection">
					<h2>My account</h2>
					<c:if test="${!empty userSection.reservations}">
						<h3>Reservations</h3>
						<h:form id="reservationForm">
							<h:dataTable 	id="reservationTable" 
											border="0" cellspacing="0" cellpadding="3"
											styleClass="dataTable"
											columnClasses="reservationTableImageColumn,reservationTableTitleColumn,reservationTableMediumTypeColumn,reservationTableSoreNameColumn,reservationTableExpiryDateColumn,reservationTableActionColumn"
											value="#{userSection.reservations}"
											var="reservation"
							>
								<h:column headerClass="reservationTableImageColumn">
									<f:facet name="header">
									</f:facet>
									<h:graphicImage url="#{reservation.medium.title.iconUrl}"/>
								</h:column>
								<h:column headerClass="reservationTableTitleColumn">
									<f:facet name="header">
										<h:commandLink action="#{userSection.sortReservationsByTitle}">
											<f:verbatim escape="true">Title</f:verbatim>
										</h:commandLink>
									</f:facet>
									<h:outputText value="#{reservation.medium.title.titleName}"	/>
								</h:column>
								<h:column headerClass="reservationTableMediumTypeColumn">
									<f:facet name="header">
										<h:commandLink action="#{userSection.sortReservationsByMediumType}">
											<f:verbatim escape="true">Format</f:verbatim>
										</h:commandLink>
									</f:facet>
									<h:graphicImage url="#{reservation.medium.mediumType.iconUrl}" height="60px"/>
								</h:column>
								<h:column headerClass="reservationTableSoreNameColumn">
									<f:facet name="header">
										<h:commandLink action="#{userSection.sortReservationsByStore}">
											<f:verbatim escape="true">Store</f:verbatim>
										</h:commandLink>
									</f:facet>
									<h:outputText value="#{reservation.store.storeName}"/>
								</h:column>
								<h:column headerClass="reservationTableExpiryDateColumn">
									<f:facet name="header">
										<h:commandLink action="#{userSection.sortReservationsByExpiryDate}">
											<f:verbatim escape="true">Expiry Date</f:verbatim>
										</h:commandLink>
									</f:facet>
									<h:outputText value="#{reservation.expiryDate}">
										<f:convertDateTime pattern="dd-MMM-yyyy"/>
									</h:outputText>
								</h:column>
								<h:column headerClass="reservationTableActionColumn">
									<f:facet name="header">
										<f:verbatim escape="true">Action</f:verbatim>
									</f:facet>
									<h:commandLink styleClass="button" action="#{reservationSection.cancelReservation}">
										<f:verbatim escape="true">Cancel</f:verbatim>
									</h:commandLink>
								</h:column>
							</h:dataTable>
						</h:form>
					</c:if>
					
					<c:if test="${!empty userSection.rentals}">
						<h3>Rentals</h3>
						<h:form>
							<h:dataTable 	
											border="0" cellspacing="0" cellpadding="3"
											styleClass="dataTable"
											columnClasses="rentalTableImageColumn,rentalTableTitleColumn,rentalTableMediumTypeColumn,rentalTableSoreNameColumn,rentalTableDueDateColumn,rentalTableReturnDateColumn,rentalTableStatusColumn"
	 										value="#{userSection.rentals}"
											var="rental"
							>
								<h:column headerClass="rentalTableImageColumn">
									<f:facet name="header">
									</f:facet>
									<h:graphicImage url="#{rental.titleCopy.medium.title.iconUrl}"/>
								</h:column>
								<h:column headerClass="rentalTableTitleColumn">
									<f:facet name="header">
										<h:commandLink action="#{userSection.sortRentalsByTitle}">
											<f:verbatim escape="true">Title</f:verbatim>
										</h:commandLink>
									</f:facet>
									<h:outputText value="#{rental.titleCopy.medium.title.titleName}"/>
								</h:column>
								<h:column headerClass="rentalTableMediumTypeColumn">
									<f:facet name="header">
										<h:commandLink action="#{userSection.sortRentalsByMediumType}">
											<f:verbatim escape="true">Format</f:verbatim>
										</h:commandLink>
									</f:facet>
									<h:outputText value="#{rental.titleCopy.medium.mediumType.description}"/>
								</h:column>
								<h:column headerClass="rentalTableSoreNameColumn">
									<f:facet name="header">
										<h:commandLink action="#{userSection.sortRentalsByStore}">
											<f:verbatim escape="true">Store</f:verbatim>
										</h:commandLink>
									</f:facet>
									<h:outputText value="#{rental.titleCopy.store.storeName}"/>
								</h:column>
								<h:column headerClass="rentalTableDueDateColumn">
									<f:facet name="header">
										<h:commandLink action="#{userSection.sortRentalsByDueDate}">
											<f:verbatim escape="true">Due Date</f:verbatim>
										</h:commandLink>
									</f:facet>
									<h:outputText value="#{rental.dueDate}">
										<f:convertDateTime pattern="dd-MMM-yyyy"/>
									</h:outputText>
								</h:column>
								<h:column headerClass="rentalTableReturnDateColumn">
									<f:facet name="header">
										<h:commandLink action="#{userSection.sortRentalsByReturnDate}">
											<f:verbatim escape="true">Return Date</f:verbatim>
										</h:commandLink>
									</f:facet>
									<h:outputText value="#{rental.returnDate}">
										<f:convertDateTime pattern="dd-MMM-yyyy"/>
									</h:outputText>
								</h:column>
								<h:column headerClass="rentalTableStatusColumn">
									<f:facet name="header">
										<h:commandLink  action="#{userSection.sortRentalsByStatus}">
											<f:verbatim escape="true">Status</f:verbatim>
										</h:commandLink>
									</f:facet>
									<h:outputText value="#{rental.status}"/>
								</h:column>
							</h:dataTable>
						</h:form>
					</c:if>
				</td>
			</tr>
		</table>
	</f:view>
</html>